<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;margin:0;padding: 0">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>格式化mysql表</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">-->

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->

    <!--&lt;!&ndash; popper.min.js 用于弹窗、提示、下拉菜单 &ndash;&gt;-->
    <!--<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>-->

    <!--&lt;!&ndash; 最新的 Bootstrap4 核心 JavaScript 文件 &ndash;&gt;-->
    <!--<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>-->
    <style>
        .btn-ok {
            display: inline-block;
            text-align: center;
            background: #FF7F27;
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 0.2rem;
            margin-top: 3rem;
        }

        #tableWrap {
            margin-top: 3rem;
        }

        th, td {
            padding: .5rem 1rem;
            border-right: 1px solid #9E9E9E;
        }

        table {
            font-size: 14px;
            border: 1px solid #9E9E9E;
            border-collapse: collapse;
        }

        tr {
            border-bottom: 1px solid #9E9E9E;
        }

        #resultTextEl {
            text-decoration: none;
            opacity: 0;
        }

        #inputTextEl {
            width: 100%;
            height: 10rem;
        }
        .container{
            position: relative;
            width: 30rem;
            margin: 5rem auto;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;margin:0;padding: 0;">
<div class="container">

    <textarea id="inputTextEl" oninput="statsColumnText(event)"></textarea>
    <input id="resultTextEl"/>

    <div>
        <span>列数：</span>
        <input id="columnNumEl"/>
    </div>
    <div class="btn-ok" onclick="clickCovert(event)">转为表格</div>

    <div class="btn-ok" onclick="copyTableCode(event)">复制表格代码</div>


    <div id="tableWrap"></div>

</div>

<script>

    var inputTextEl = document.getElementById("inputTextEl");
    var resultTextEl = document.getElementById("resultTextEl");
    var columnNumEl = document.getElementById("columnNumEl");
    var tableWrap = document.getElementById("tableWrap");

    function clickCovert() {
        var tableHtml = getFormatStr();
        resultTextEl.value = tableHtml;
        tableWrap.innerHTML = tableHtml;
    }

    //统计一行的列数
    function statsColumnText(e) {
        var inputText = e.target.value;
        // console.log(inputText);
        var column = 0;
        for (var i = 0; i < inputText.length; i++) {
            if (inputText[i] === '|') {
                column++;
            }
            if (column > 2 && (inputText[i] === '\n' || inputText[i] === '\r\n')) {
                break;
            }
        }
        column = column - 2;//至少两个| ，为一个单元格
        columnNumEl.value = column + "";

    }

    function getFormatStr() {
        var inputText = inputTextEl.value;

        var column = parseInt(columnNumEl.value);
        if (isNaN(column)) {
            return;
        }

        var cellIndexs = getCellIndexs();
        var start = 0;
        var end = 0;
        var fColumn = column + 2;

        var text = "<table>";
        for (var j = 0; j < cellIndexs.length; j++) {
            if (j + 1 <= cellIndexs.length) {
                start = cellIndexs[j] + 1;
                end = cellIndexs[j + 1];

                if (j === 0) {
                    text += "<tr>"
                }
                if ((j + 1) % fColumn === 0) {//满了一行
                    if (j + 1 < cellIndexs.length) {//不是最后一行
                        text += "</tr><tr>";//行尾首
                    } else {//最后一行
                        text += "</tr>";
                    }
                    continue;//跳过下一个，防止匹配两行之间
                }

                // console.log(inputText.substring(start, end));
                if ((j < fColumn)) {//第一行
                    text += "<th>" + inputText.substring(start, end) + "</th>";
                } else {
                    text += "<td>" + inputText.substring(start, end) + "</td>";

                }
            }

        }
        text += "</table>";

        return text;
    }

    function getCellIndexs() {
        var inputText = inputTextEl.value;
        var cellIndexs = [];
        //统计所有|出现的位置。
        var start = 0;
        var end = 0;
        for (var i = 0; i < inputText.length; i++) {

            if (inputText[0] === '|') {
                cellIndexs.push(i);
            }
            else if (inputText[inputText.length - 1] === '|') {
                cellIndexs.push(i);
            }
            else {

                start = i - 1;
                end = i + 2;

                var str = inputText.substring(start, end);

                if (/[ \n\r]\|[ \n\r]/.test(str)) {//|号前后至少有空格或换行
                    // console.log(str);
                    cellIndexs.push(i);
                }
            }
        }

        return cellIndexs;
    }

    function copyTableCode(event) {
        resultTextEl.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert("复制成功");
    }

</script>
</body>
</html>